@property --d {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.menu:before {
  content: "";
  position: absolute;
  inset: -8px;
  padding: 8px;
  border-radius: 28px;
  background: conic-gradient(
    from var(--d, 0deg),
    #21d4fd,
    #0000 30deg 120deg,
    #b721ff 150deg 180deg,
    #0000 210deg 300deg,
    #21d4fd 330deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: intersect;
}
.menu:after {
  content: "";
  position: absolute;
  inset: -100px;
  background: radial-gradient(80px at left 150px top 120px, #21d4fd 98%, #0000),
    radial-gradient(80px at right 150px bottom 120px, #b721ff 98%, #0000);
  filter: blur(60px);
  opacity: 0.5;
}

.menu:before,
.menu:after {
  transition: 0.5s, 99999s 99999s transform, 99999s 99999s --d;
}
.menu:hover {
  box-shadow: 0 0 0 1px #666;
}

.menu:hover:after {
  transform: rotate(3600deg);
  transition: 0.5s, 60s linear transform;
}
.menu:hover:before {
  --d: 3600deg;
  transition: 0.5s, 60s linear --d;
}
.menu:hover:before {
  background-color: #222;
}
